<template>
  <div class="section" ref="parent">
      <!-- <div class="border-row"></div>
    <div class="border-col"></div> -->
    <div class="box" ref='box' :style="`height:${chartsDom.height};width:${chartsDom.height}`" v-if="jz">
        <div :style="`font-size:${bOXHeight}px;letter-spacing:3px;font-weight:bold`">用人单位信息</div>
		<div class="flex-center" style="font-size:25px;margin:20px 0 0 0 ;color:#ff0000">{{curOpt}}新增用人单位<span style="font-size:30px;color:#cfc000;margin:5px 0 0 10px">{{dataData}}</span><span style="font-size:30px;color:#cfc000;margin:5px 0 0 5px">家</span></div>
		<div class="flex-center" style="font-size:25px;margin:20px 0 0 0 ;color:#ff0000">{{curOpt}}活跃用人单位<span style="font-size:35px;color:#cfc000;margin:5px 0 0 10px">{{positionData.ent}}</span><span style="font-size:30px;color:#cfc000;margin:5px 0 0 5px">家</span></div>		
		<div class="flex-center" style="font-size:25px;margin:20px 0 0 0 ;color:#ff0000">{{curOpt}}在招岗位<span style="font-size:30px;color:#cfc000;margin:5px 0 0 10px">{{positionData.job}}</span><span style="font-size:30px;color:#cfc000;margin:5px 0 0 5px">个</span></div>
		<div class="flex-center" style="font-size:25px;margin:20px 0 0 0 ;color:#ff0000">累计入驻用人单位<span style="font-size:30px;color:#cfc000;margin:5px 0 0 10px">{{dataAll}}</span><span style="font-size:30px;color:#cfc000;margin:5px 0 0 5px">家</span></div>
    </div>
    <!-- <animation-bg></animation-bg> -->
    <animae-jz class="box" :style="`height:${chartsDom.height};width:${chartsDom.height}`" v-if="!jz"></animae-jz>
  </div>
</template>
<script>

import { enterpriseSettleInTotal } from '@/api/data'
import { numberOfPosts } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      bOXHeight:this.height/15,
      dataData:'',
	  dataAll:'',
	  positionData:'',
      jz:true
    }
  },
  props: ['height','dateProp','curOpt'],
  computed: {
	  dataAll1() {
	  		return {
	  			startDate: this.formatDate('2013-01-01', 'YYYY-MM-DD')
	  		}
	  	},
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init()
    })
  },
  methods: {

  init(){
    this.jz=false
      enterpriseSettleInTotal(this.dateProp).then(({data:{data}})=>{
        this.jz=true
        this.dataData=data
      }),
	  enterpriseSettleInTotal(this.dataAll1).then(({data:{data}})=>{
	    this.jz=true
	    this.dataAll=data
	  }),
	  numberOfPosts(this.dateProp).then(({data:{data}})=>{
	    this.jz=true
	    this.positionData=data
	  })
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    display flex
    justify-content center
    align-items center
    background rgba(0,0,0,0)
  .flex-center
    display flex
    justify-content center
    align-items center
  .box
    border-radius: 50%;
    background-image: url(./../../../assets/col-mid-bg.jpg);
    background-size: cover;
    animation: animate-xz 50s linear infinite;
    display flex
    justify-content center
    flex-direction column
    align-items center
    color #f0ff4c
    box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
  @keyframes animate-xz {
        from {
            background-position: 0 0;
        }
        to {
            background-position: 248% 0;
        }
    }
</style>